<template>
  <div class="center">
    <!-- 搜索 -->
    <searchVue></searchVue>
    <swiper-vue :list="list"></swiper-vue>
    <service-vue :serviceList="serviceList"></service-vue>
    <!-- 热门主题 -->
    <hot-theme-vue></hot-theme-vue>
    <!-- 新闻 -->
    <news-vue></news-vue>
  </div>
</template>

<script>
import searchVue from "@/components/home/SearchView.vue";
import swiperVue from "@/components/home/swiperView.vue";
import serviceVue from "@/components/home/serviceView.vue";
import { swiperlist, serviceList } from "../service/homeService";
import hotThemeVue from "@/components/home/HotThemeView.vue";
import newsVue from "@/components/home/NewsView.vue";

export default {
  data() {
    return {
      list: [], //轮播图的地址
      serviceList: [], //
    };
  },
  async created() {
    let res = await swiperlist({ type: 2 }); //发送请求
    this.list = res.data.rows;
    let res2 = await serviceList(); //16
    this.serviceList = res2.data.rows.splice(0, 9);
    this.serviceList.push({
      id: 0,
      serviceName: "更多服务",
      link: "service",
      url: "https://img0.baidu.com/it/u=1045117647,2022811853&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500",
    });
  },
  components: {
    swiperVue,
    serviceVue,
    searchVue,
    hotThemeVue,
    newsVue,
  },
};
</script>
<style lang="scss" scoped>
.center {
  font-size: 14px;
  line-height: 35px;
  background: #f0f0f0;
  .search {
    height: 80px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 9;
    top: 0px;
  }
}
</style>
